import React from 'react';
import { connect, connectMaster } from 'umi';
import { Drawer, Button, Message } from 'antd';
import RoleCount from './RoleCount';
import styles from './index.less';

@connectMaster //接收主服务数据
@connect(({ Role }) => ({ Role }))
export default class extends React.Component {
  forms = {};

  handleOk = async () => {
    const { roleVisibledrawerType } = this.props.Role;
    if (roleVisibledrawerType == 'add') this.add();
    if (roleVisibledrawerType == 'update') this.update();
  };

  // 添加角色
  add = async () => {
    const { roleForm } = this.forms;
    var attr = [roleForm?.validateFields()];
    var [roleFormData] = await Promise.all(attr);
    var { roleName, authName } = roleFormData;
    var authVoList = authName.map(item => ({ id: item }));
    var reqData = {
      roleName: roleName,
      authVoList: authVoList,
    };

    var rs = await this.props.dispatch({
      type: 'Role/addRole',
      payload: reqData,
    });

    if (!rs.success) {
      if (rs.subCode == '100203') Message.error('重复的角色名');
      if (rs.subCode != '100203') Message.success('修改失败');
    }
    // 成功
    if (rs.success) {
      Message.success('添加成功');
      this.onClose();
      //  更新列表
      this.props.parentThis.getRoleList();
    }
  };

  // 修改角色
  update = async () => {
    const { roleId } = this.props.Role;
    const { roleForm } = this.forms;
    var attr = [roleForm?.validateFields()];
    var [roleFormData] = await Promise.all(attr);
    var { roleName, authName } = roleFormData;
    var authVoList = authName.map(item => ({ id: item }));
    var reqData = {
      id: roleId,
      roleName: roleName,
      authVoList: authVoList,
    };

    var rs = await this.props.dispatch({
      type: 'Role/updateRoleInfoById',
      payload: reqData,
    });

    if (!rs.success) {
      if (rs.subCode == '100203') Message.error('重复的角色名');
      if (rs.subCode != '100203') Message.success('修改失败');
    }
    // 成功
    if (rs.success) {
      Message.success('修改成功');
      this.onClose();
      //  更新列表
      this.props.parentThis.getRoleList();
    }
  };

  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'Role/setState',
      payload: obj,
    });
  };

  //获取抽屉type类型
  getTitle = () => {
    const { roleVisibledrawerType } = this.props.Role;
    if (roleVisibledrawerType == 'add') return '创建角色';
    if (roleVisibledrawerType == 'update') return '修改角色';
  };
  //关闭弹窗
  onClose = () => {
    this.props.dispatch({
      type: 'Role/setState',
      payload: { drawerVisible: false },
    });
  };

  render() {
    const { drawerVisible } = this.props.Role;
    return (
      <div>
        <Drawer
          destroyOnClose={true}
          className={styles.drawerCont}
          title={this.getTitle()}
          width="500px"
          onClose={() => {
            this.onClose();
          }}
          visible={drawerVisible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={this.handleOk} type="primary">
                提交
              </Button>
            </div>
          }
        >
          <RoleCount init={form => (this.forms.roleForm = form)} />
        </Drawer>
      </div>
    );
  }
}
